{% extends "finance/base.html" %}
{% load humanize %}

{% block content %}
<style>
  .comparison-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid #dfe3e7;
    border-radius: 4px;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }
  /* Keep the table wider than the viewport instead of squeezing its columns. */
  .comparison-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    margin-bottom: 0;
  }
  .comparison-table th {
    background: #56636f;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    border: 1px solid #68747e;
    padding: 8px 9px;
    font-size: .9rem;
  }
  .comparison-table td {
    white-space: nowrap;
    border-left: 1px solid #e1e4e7;
    border-right: 1px solid #e1e4e7;
    border-bottom: 1px solid #e1e4e7;
    padding: 6px 9px;
    font-size: .9rem;
    background: #fff;
  }
  .comparison-table tbody tr:nth-child(even) td { background: #f3f4f5; }
  .comparison-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 112px;
  }
  .comparison-table .month-value { min-width: 112px; }
  .comparison-table .total { font-weight: 700; min-width: 132px; }
  .comparison-table .delta { min-width: 120px; }
  .comparison-table .account-name { min-width: 230px; }
  .comparison-table .account-no { min-width: 125px; }
  .comparison-table .month-group { border-left: 2px solid #fff !important; }
  .comparison-table .summary-group { border-left: 2px solid #fff !important; }
  .delta-positive { color: #198754 !important; }
  .delta-negative { color: #dc3545 !important; }
  .delta-neutral { color: #495057 !important; }
  .filter-panel { background: #f3f5f7; padding: 12px; border-radius: 5px; margin-bottom: 14px; }
  .quarter-nav { display:flex; justify-content:center; align-items:center; gap:12px; margin:10px 0 14px; }
  .quarter-nav .btn { min-width:42px; }
  .version-legend { margin-bottom: 8px; }
  .scroll-hint { font-size: .82rem; color: #6c757d; margin: 0 0 6px; }
  @media (max-width: 768px) {
    .comparison-table th, .comparison-table td { font-size: .82rem; padding: 5px 7px; }
    .comparison-table .account-name { min-width: 200px; }
  }
</style>
<div class="container-fluid px-3">
  <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
    <div>
      <h3 class="mb-1">Budget Version Comparison</h3>
      <div class="text-muted">Compare up to three saved versions. This screen is read-only and does not change the active budget.</div>
    </div>
    <a href="{% url 'budget' %}?year={{ year }}" class="btn btn-secondary">Back to Entry Budget / WP&amp;B</a>
  </div>

  <form method="get" class="filter-panel">
    <input type="hidden" name="quarter" value="{{ quarter }}">
    <div class="row g-2 align-items-end">
      <div class="col-6 col-md-2">
        <label class="form-label">Budget Year</label>
        <select name="year" class="form-select" onchange="this.form.submit()">
          {% for y in years %}<option value="{{ y }}" {% if y == year %}selected{% endif %}>{{ y }}</option>{% endfor %}
        </select>
      </div>
      {% for n in "123" %}
      <div class="col-6 col-md-2">
        <label class="form-label">Version {{ n }}</label>
        <select name="v{{ n }}" class="form-select">
          <option value="">— Not selected —</option>
          {% for version in versions %}
          <option value="{{ version.id }}" {% if version.id|stringformat:"s" == selected_v1 and n == "1" or version.id|stringformat:"s" == selected_v2 and n == "2" or version.id|stringformat:"s" == selected_v3 and n == "3" %}selected{% endif %}>
            V{{ version.version_no }}{% if version.status == 'ACTIVE' %} — ACTIVE{% endif %} · {{ version.effective_date|date:"d-m-Y" }}
          </option>
          {% endfor %}
        </select>
      </div>
      {% endfor %}
      <div class="col-12 col-md-2">
        <label class="form-label">Search Account</label>
        <input type="text" name="search" value="{{ search }}" class="form-control" placeholder="Account No / Name">
      </div>
      <div class="col-8 col-md-1">
        <label class="form-label">Status</label>
        <select name="budget_status" class="form-select">
          <option value="all" {% if budget_status == 'all' %}selected{% endif %}>All</option>
          <option value="budgeted" {% if budget_status == 'budgeted' %}selected{% endif %}>Budgeted</option>
          <option value="non_budgeted" {% if budget_status == 'non_budgeted' %}selected{% endif %}>Non Budgeted</option>
        </select>
      </div>
      <div class="col-4 col-md-1"><button class="btn btn-primary w-100" type="submit">Compare</button></div>
    </div>
    <div class="small text-muted mt-2">Tampilan per kuartal. Jika memilih tiga versi, geser tabel ke kanan untuk melihat total dan selisih. Kenaikan berwarna hijau, penurunan merah.</div>
  </form>

  {% if not selected_headers %}
    <div class="alert alert-info">Belum ada versi budget untuk tahun {{ year }}. Silakan upload budget terlebih dahulu.</div>
  {% else %}
    <div class="quarter-nav">
      <a class="btn btn-outline-secondary" aria-label="Previous quarter" href="?year={{ year }}&quarter={{ prev_quarter }}&v1={{ selected_v1 }}&v2={{ selected_v2 }}&v3={{ selected_v3 }}&search={{ search|urlencode }}&budget_status={{ budget_status }}">&lt;</a>
      <h5 class="mb-0">{{ quarter_label }} · {{ quarter_months.0 }}–{{ quarter_months.2 }} {{ year }}</h5>
      <a class="btn btn-outline-secondary" aria-label="Next quarter" href="?year={{ year }}&quarter={{ next_quarter }}&v1={{ selected_v1 }}&v2={{ selected_v2 }}&v3={{ selected_v3 }}&search={{ search|urlencode }}&budget_status={{ budget_status }}">&gt;</a>
    </div>
    <div class="mb-2 d-flex flex-wrap gap-2 version-legend">
      {% for version in selected_headers %}
      <span class="badge {% if version.status == 'ACTIVE' %}bg-success{% else %}bg-secondary{% endif %}">V{{ version.version_no }} · {{ version.status }} · Effective {{ version.effective_date|date:"d-m-Y" }}</span>
      {% endfor %}
    </div>
    <div class="scroll-hint"><i class="bi bi-arrow-left-right"></i> Scroll horizontally to view all selected versions and quarter deltas.</div>
    <div class="comparison-wrap">
      <table class="table table-sm comparison-table">
        <thead>
          <tr>
            <th rowspan="2">No</th><th rowspan="2">Account No</th><th rowspan="2">Account Name</th>
            {% for month in quarter_months %}<th class="month-group" colspan="{{ selected_headers|length }}">{{ month }}</th>{% endfor %}
            {% for item in selected_headers %}<th rowspan="2" class="summary-group">Quarter Total V{{ item.version_no }}</th>{% endfor %}
            {% for item in selected_headers %}{% if not forloop.first %}<th rowspan="2" class="summary-group">Δ Q V{{ item.version_no }} vs V{{ selected_headers.0.version_no }}</th><th rowspan="2">Δ %</th>{% endif %}{% endfor %}
          </tr>
          <tr>
            {% for month in quarter_months %}{% for item in selected_headers %}<th class="{% if forloop.first %}month-group{% endif %}">V{{ item.version_no }}</th>{% endfor %}{% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for row in rows %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td class="account-no">{{ row.acct_no }}</td>
            <td class="account-name">{{ row.acct_name }}</td>
            {% for month_index in "012" %}
              {% for v in row.versions %}
                <td class="num month-value {% if forloop.first %}month-group{% endif %}">{% if month_index == "0" %}{{ v.quarter_months.0|floatformat:2|intcomma }}{% elif month_index == "1" %}{{ v.quarter_months.1|floatformat:2|intcomma }}{% else %}{{ v.quarter_months.2|floatformat:2|intcomma }}{% endif %}</td>
              {% endfor %}
            {% endfor %}
            {% for v in row.versions %}<td class="num total summary-group">{{ v.quarter_total|floatformat:2|intcomma }}</td>{% endfor %}
            {% for d in row.deltas %}
              <td class="num delta {% if d.amount > 0 %}delta-positive{% elif d.amount < 0 %}delta-negative{% else %}delta-neutral{% endif %}">{{ d.amount|floatformat:2|intcomma }}</td>
              <td class="num delta {% if d.percent > 0 %}delta-positive{% elif d.percent < 0 %}delta-negative{% else %}delta-neutral{% endif %}">{% if d.percent != None %}{{ d.percent|floatformat:2 }}%{% else %}—{% endif %}</td>
            {% endfor %}
          </tr>
          {% empty %}
          <tr><td colspan="30" class="text-center text-muted py-4">Tidak ada account yang sesuai filter.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}
</div>
{% endblock %}